<!--王嘉欣-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>提交记录</title>
    <meta name="description" content="Charcoal is a free Bootstrap 4 UI kit build by @attacomsian at Wired Dots." />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--Bootstrap 4-->
    <link rel="stylesheet" href="css/bootstrap.css">
    <style>
        /*导航栏样式*/
        .navbar {
            background-color: #222;
        }
        #daohang {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: transparent;
        }
        li {
            float: left;
        }
        li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }
        /*!*鼠标移动到选项上修改背景颜色 *!*/
        li a:hover {
            background-color: #111;
        }
        .active {
            background-color: black;
        }
        /*  页码样式  */
        ul{
            height:100%;
            list-style-type:none;
        }

        li{
            line-height:20px;
            float:left;
        }
        /*.page_btn{*/
        /*    border-radius:4px;*/
        /*    border:1px solid #e5e9ef;*/
        /*    background:#fff;*/
        /*    margin-right:10px;*/
        /*    text-align:center;*/
        /*    width:25px;*/
        /*    height:19px;*/
        /*    line-height: 4px;*/
        /*    margin-top:3px;*/
        /*    outline:0;*/
        /*}*/

        /*.page_btn:hover{*/
        /*    border:1px solid #4f90fb;*/
        /*    color:#4f90fb;*/
        /*}*/
        button {
            font-size: 17px;
            height: 30px;
            padding-left: 20px;
            padding-right: 20px;
            padding-top: 5px;
            padding-bottom: 5px;
            color: #fff;
            background-color: #5bc0de;
            border: 0;
            border-radius: 10px;
        }
        button:hover{
            background-color: #97d3e7;
        }

        .even
        {
            background-color: white;
        }
    </style>
    <script src="js/jquery.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark fixed-top sticky-navigation">
    <a class="navbar-brand font-weight-bold" href="index.html">别叫我 OJ </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#topMenu" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <ul id="daohang">
        <li>
            <div id="detail" align="right">
                <a style="color: white" href="questionDetail.html" onclick="findQuestion()">问题详情</a>
            </div>
        </li>
        <li>
            <div class="active" id="remind" align="right">
                <a style="color: white" href="submitRecord.html">提交记录</a>
            </div>
        </li>
        <li>
            <div id="analyze" align="right">
                <a style="color: white" href="answer.html">题解</a>
            </div>
        </li>
    </ul>
    <div class="collapse navbar-collapse" id="topMenu">
        <ul class="navbar-nav ml-auto">
            <div style="margin:5px" id="backToIndex" align="right">
                <a style="color: white" href="index.html"> 返回首页</a>
            </div>
            <div style="margin:5px" id="javaoj" align="right">
                <a style="color: white;margin-left: 10px" href="login.html" onclick="logout()"> 退出登录</a>
            </div>
        </ul>
    </div>
</nav>
<section class="my-5 pt-5">
    <div class="container">
        <div class="row mb-2" id="tables">
            <div class="col-sm-12" style="background-color: white">
                <div class="mt-3 mb-5">
                    <h3>答题记录表</h3>
                    <table class="table table-striped" style="background-color: #f5f5f5">
                        <thead>
                        <tr>
                            <th>题目标题</th>
                            <th>提交时间</th>
                            <th>状态</th>
                            <th>语言</th>
                        </tr>
                        </thead>
                        <tbody id="analyzeTable">
                        </tbody>
                    </table>

                </div>
            </div>
            <!--  页码  -->
            <div style="margin: 0 auto">
                <div class="mt-3 mb-5">
                    <ul style="font-size: 12px;">
                        <li class="page_li">
                            <button class="page_btn" onclick="firstPage()">首页</button>
                        </li>
                        <li class="page_li" style="margin-left: 20px">
                            <button class="page_btn" onclick="previousPage()">上一页</button>
                        </li>
                        <li class="page_li" style="margin-left: 20px">
                            <button class="page_btn" id="midPage"></button>
                        </li>
                        <li class="page_li" style="margin-left: 20px">
                            <button class="page_btn" onclick="nextPage()">下一页</button>
                        </li>
                        <li class="page_li" style="margin-left: 20px">
                            <button class="page_btn" onclick="lastPage()">末页</button>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>
<!--footer-->
<section class="py-5 bg-dark">
    <div class="container">
        <div class="row">
            <div class="col-md-6 offset-md-3 col-sm-8 offset-sm-2 col-xs-12 text-center">
                <p class="pt-2 text-muted">
                    &copy; by <a href="aboutUs.html" target="_blank">别叫我们组</a>
                </p>
            </div>
        </div>
    </div>
</section>
<script>
    var userId=localStorage.getItem("userId");
    console.log("userId:" + userId);
    var problemId = getCookie("problemId");
    // 如果本机cookie没有数值，则赋初值
    if(problemId == null){
        problemId=1;
    }
    console.log("problemId:" + problemId);
    getUser();
    function getUser(){
        if (userId==null){
            location.assign("login.html");
        }
    }
    function logout(){
        localStorage.clear();
    }

    function findQuestion () {
        $.ajax({
            url:"http://localhost:8020/question/findQuestion/" + localStorage.getItem("questionId"),
            contentType:"application/json; charset=utf-8",
            success:function (object) {
                console.log(object);
                const data = object.data;
                // 题目
                $("#questionTitle").text(data.id + ". " + data.title);
                // 问题描述
                $("#questionDesc").text(data.description);
                // 输入格式
                $("#inputDesc").text(data.inputDescription);
                // 输出格式
                $("#outputDesc").text(data.outputDescription);
                // 内存限制
                $("#memoryLimit").text(data.memoryLimit);
                // 时间限制
                $("#timeLimit").text(data.timeLimit);
                // 输入样例
                const input = JSON.parse(data.inputList).input1;
                $("#input").text(input);
                // 输出样例
                const output = JSON.parse(data.outputList).output1;
                $("#output").text(output);
            }
        })
    }

    //初始页码为1
    let nowPage=1;
    let totalPage=1;
    var questionTitle;

    getPage(1);
    //发送请求的函数
    function getPage(nowPage){
        $.ajax({
            url:"http://192.168.47.129:8010/user/queryRecordList?userId="+userId+"&questionId="+localStorage.getItem("questionId")+"&page="+nowPage,
            type:"GET",
            success:function(data,status){
                //设置表格的函数
                // makeRecord(data);
                totalPage = data.data.totalPages;
                $.ajax({
                    url:"http://localhost:8020/question/findQuestion/" + localStorage.getItem("questionId"),
                    type:"GET",
                    success:function(data1){
                        questionTitle=data1.data.title;
                        //判断表格中是否有内容，如果有，删掉
                        if($("table tr").length != 0){
                            $('table').find('tr:gt(0)').remove();
                        }
                        let array = data.data.content;
                        for (let i=0; i<array.length; i++) {
                            $(".table").append("<tr>\n" +
                                "<td>" + questionTitle + "</td>\n" +
                                "<td>" + array[i].createTime + "</td>" +
                                "<td><a href='recordDetail.html?recordId=" + array[i].id + "'>" + array[i].status + "</a></td>\n" +
                                "<td>" + array[i].language + "</td>" +
                                "</tr>");
                        }

                        if(document.getElementById("midPage") != null){
                            let mid=document.getElementById("midPage");
                            mid.innerHTML="第 "+nowPage+" / "+""+totalPage+" 页";
                        }

                        //表格单双行变色
                        $().ready(function(){
                            $('tr:even').addClass('even');
                        });
                    },
                })

            },
        })

    }

    //设置表格的函数
    function makeRecord(data){
        totalPage = data.data.totalPages;
        let analyzeTable=document.querySelector("#analyzeTable");
        //判断表格中是否有内容，如果有，删掉
        if($("table tr").length != 0){
            $('table').find('tr:gt(0)').remove();
        }
        //将内容循环放入表格
        /*
        let array=data.data.content;
        for (let i=0; i<array.length; i++) {
            $(".table").append("<tr>\n" +
                "<td>" + array[i].questionId + "</td>\n" +
                "<td><a href='questionDetail.html?questionId=" + array[i].id + "'>" + array[i].title + "</a></td>\n" +
                "<td>" + array[i].degree + "</td>\n" +
                "</tr>");
        }*/
        for(let record of data.data.content){
            let tr=document.createElement("tr");
            //插入标题
            let tdTitle=document.createElement("td");
            let aT = document.createElement("a");
            $.ajax({
                url:"http://localhost:8020/question/findQuestion/" + record.questionId,
                type:"GET",
                success:function(data,status){
                    aT.innerHTML=data.data.title;
                },
            })
            aT.href = "questionDetail.html?questionId=" + record.questionId;
            tdTitle.appendChild(aT);
            tr.appendChild(tdTitle);

            //插入提交时间
            let tdCreateTime=document.createElement("td");
            tdCreateTime.innerHTML=record.createTime;
            tr.appendChild(tdCreateTime);
            //插入状态
            let tdStatus=document.createElement("td");
            let aDetail=document.createElement("a");
            aDetail.innerHTML=record.status;
            aDetail.href="recordDetail.html?recordId="+record.id;

            aDetail.addEventListener("click", function (){
                $(this).css("color","#f0f");
            })

            tdStatus.appendChild(aDetail);
            tr.appendChild(tdStatus);
            //插入错误原因
            let tdReason=document.createElement("td");
            if ($.isEmptyObject(record.language)){
                if (record.status == "正确"){
                    tdReason.innerHTML="该题目作答正确";
                }else {
                    console.log("Id为" + record.id + "的数据错误原因出错啦。。。")
                }
            }else {
                if(record.reason.length<10){
                    tdReason.innerHTML = record.reason;
                }
                else {
                    tdReason.innerHTML = record.reason.substring(0,10)+"...";
                }
                // tdReason.innerHTML=record.reason;
            }
            tr.appendChild(tdReason);
            //插入语言
            let tdLanguage=document.createElement("td");
            if ($.isEmptyObject(record.language)){
                tdLanguage.innerHTML="Java";
            }else {
                tdLanguage.innerHTML=record.language;
            }
            tr.appendChild(tdLanguage);
            analyzeTable.appendChild(tr);
        }
        //插入中间的页码
        console.log(document.getElementById("midPage"));
        if(document.getElementById("midPage") != null){
            let mid=document.getElementById("midPage");
            mid.innerHTML="第 "+nowPage+" / "+""+totalPage+" 页";
        }
    }

    //获取指定name的cookie值
    function getCookie(name){
        var arr1=document.cookie.split(";");
        for(var i=0;i<arr1.length;i++){
            var arr2=arr1[i].split("=");//通过=截断，把name=Jack截断成[name,Jack]数组；
            if(i != 0){
                var now = " " + name;
            }else {
                var now=name;
            }
            if(arr2[0]==now){
                return decodeURI(arr2[1]);
            }
        }
    }

    //设置页码的函数
    //首页函数
    function firstPage(){
        nowPage=1;
        getPage(nowPage);
    }
    //末页函数
    function lastPage(){
        nowPage=totalPage;
        getPage(totalPage);
    }
    //上一页函数
    function previousPage(){
        //如果当期页是第一页
        if(nowPage == 1){
            nowPage=2;
        }
        nowPage--;
        getPage(nowPage);
    }
    //下一页函数
    function nextPage(){
        //如果当前页是最后一页
        if (nowPage == totalPage){
            nowPage--;
        }
        nowPage++;
        getPage(nowPage);
    }

</script>
</body>
</html>